<template>
  <div class="users">
      <header>
          <p class="header-icon"><span class="iconfont icon-erji"></span></p>
      </header>
      <div class="info">
          <img src="/news/info1.jpg">
          <div class="userinfo">
              <p class="username">用户名</p>
              <p class="phone">181****3082</p>
          </div>
          <div class="change">
              编辑资料
          </div>
      </div>
      <div class="jifen">
          <div class="jifen_1">
              <div class="left">
                  <p class="p1">****</p>
                  <p>积分兑换</p>
              </div>
              <div class="right">
                  <p class="p1">0</p>
                  <p>我的福利</p>
              </div>
          </div>
      </div>
      <div class="order">
          <div class="order-top">
              <p class="pt">我的订单</p>
              <p class="pb">查看全部></p>
          </div>
          <div class="order-bot">
              <Icon v-for="(v,i) in orderstr" :key="i" :content="v.content" :icon="v.icon"/>
          </div>
      </div>
      <div class="server">
          <p class="pt">我的服务</p>
          <div class="serve-icon">
              <Icon class="icon_s" v-for="(v,i) in servestr" :key="i" :content="v.content" :icon="v.icon"/>
          </div>
      </div>
      <div class="theme">
          <p class="pt">主题邮局</p>
          <div class="theme-icon">
              <Icon v-for="(v,i) in themestr" :key="i" :content="v.content" :icon="v.icon"/>
          </div>
      </div>
      <div class="my">
          <div class="card">
              <p class="pt">我的银行卡</p>
              <p class="pb">查看银行卡、支付宝 ></p>
          </div>
          <div class="card">
              <p class="pt">报刊补退款</p>
              <p class="pb">></p>
          </div>
          <div class="card">
              <p class="pt">我的客户经理</p>
              <p class="pb">未绑定></p>
          </div>
          <div class="card">
              <p class="pt">设置</p>
              <p class="pb">></p>
          </div>
      </div>
      <footer></footer>
  </div>
</template>

<script>
import Icon from './icon.vue'
export default {
    components:{
        Icon
    },
    data(){
        return {
            usertext:[
                {content:'待付款',icon:'iconfont icon-licai'},
                {content:'待发货',icon:'iconfont icon-wuliukuaidiche'},
                {content:'待收货',icon:'iconfont icon-baoguodingdanpeisong'},
                {content:'评价中心',icon:'iconfont icon-dianzan_kuai'},
                {content:'退款/售后',icon:'iconfont icon-shouhou'},
                {content:'邮票拍卖',icon:'iconfont icon--'},
                {content:'邮票摇号',icon:'iconfont icon-baoguo_shouna_o'},
                {content:'报刊卡券',icon:'iconfont icon-wodeqiaquan-'},
                {content:'预定资格',icon:'iconfont icon-wodeqiaquan-'},
                {content:'我的寄递',icon:'iconfont icon-jikuaidi'},
                {content:'我的问答',icon:'iconfont icon-wenda'},
                {content:'我的收藏',icon:'iconfont icon-shoucang'},
                {content:'兴趣标签',icon:'iconfont icon-biaoqian'},
                {content:'保证金',icon:'iconfont icon-baozhengjindanbao'},
                {content:'农品订单',icon:'iconfont icon-chengzi'},
                {content:'草稿箱',icon:'iconfont icon-wenben'},
                {content:'已发布',icon:'iconfont icon-24gl-paperPlane'}
            ]
        }
    },
    computed:{
        orderstr(){
            return this.usertext.slice(0,5)
        },
        servestr(){
            return this.usertext.slice(5,15)
        },
        themestr(){
            return this.usertext.slice(15,17)
        }
    }
}
</script>

<style scoped>
    .users{
    background-color: #f2f2f2;
    }
    header{
        width:3.6rem;
        height:0.4rem;
    }
    .header-icon{
        width:3.3rem;
        height:100%;
        margin:auto;
        font-size:0.28rem
    }
    .iconfont{
        font-size:0.28rem;
        line-height: 0.4rem;
        float:right;
        transform: translateY(0.05rem);
    }
    .info{
        width:3.4rem;
        height:0.7rem;
        margin:auto;
        display: flex;
        justify-content: space-evenly;
    }
    .info img{
        display: block;
        width:0.6rem;
        height:0.6rem;
        border-radius: 50%;
    }
    .userinfo{
        width:2rem;
        height:0.6rem;
        transform: translateY(0.1rem);
    }
    .username{
        font-size:0.16rem;
        font-weight: bold;
    }
    .phone{
        font-size:0.14rem;
        color:gray;
    }
    .change{
        width:0.56rem;
        height:0.24rem;
        border-radius: 0.12rem;
        background-color: #fff;
        color:#62ce81;
        font-size:0.1rem;
        text-align: center;
        line-height: 0.24rem;
        transform: translateY(0.2rem);
    }
    .jifen{
        width:3.4rem;
        height:0.7rem;
        margin:auto;
        position: relative;
        background-color: #62ce81;
        border-radius: 0.08rem;
    }
    .jifen_1{
        width:3rem;
        height:0.55rem;
        position: absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        display: flex;
    }
    .left {
        width:1.5rem;
        height:100%;
        border-right:1px solid #f2f2f2
    }
    .right{
        width:1.5rem;
        height:100%;
    }
    .jifen_1 p{
        font-size:0.14rem;
        color:white;
        text-align: center;
    }
    .p1{
        margin-top:0.08rem
    }
    .order{
        width:3.4rem;
        height:1rem;
        margin:auto;
        background-color: white;
        margin-top:0.07rem;
        border-radius: 0.08rem;
    }
    .order-top{
        width:100%;
        height:0.38rem;
        border-bottom:1px solid #f2f2f2;
        display: flex;
        justify-content: space-between;
    }
    .order-bot{
        width:100%;
        height:0.64rem;
        display: flex;
        justify-content: space-around;
    }
    .pt{
        font-weight: bold;
        font-size:0.14rem;
        line-height: 0.38rem;
        margin:0 0.1rem
    }
    .pb{
        font-size:0.12rem;
        color:gray;
        font-size:0.14rem;
        line-height: 0.38rem;
        margin:0 0.1rem
    }
    .server{
        width:3.4rem;
        height:1.66rem;
        margin:auto;
        margin-top:0.2rem;
        background-color: white;
        border-radius: 0.1rem;
    }
    .serve-icon{
        width:100%;
        display: flex;
        flex-wrap: wrap;
    }
    .icon_s{
        margin-left:0.1rem;
        margin-top:0.08rem
    }
    .theme{
        width:3.4rem;
        height:1.2rem;
        margin:auto;
        margin-top:0.07rem;
        background-color: #fff;
        border-radius: 0.08rem;
    }
    .theme-icon{
        width:100%;
        display: flex;
        justify-content: space-around;
        margin-top:0.1rem
    }
    .my{
        width:3.4rem;
        height:1.8rem;
        margin:auto;
        margin-top:0.08rem;
        background-color: #fff;
        border-radius: 0.1rem;
    }
    footer{
        width:3.6rem;
        height:0.6rem;
    }
    .card{
        width:3.12rem;
        height:0.45rem;
        border-bottom:1px solid gainsboro;
        margin:auto;
        display: flex;
        justify-content: space-between;
    }
    .card:nth-child(4){
        border-bottom:none
    }
</style>